<template>
	<h3>更新头像</h3>
	<hr>
	<div style="display: flex;">
		<div style="width: 25%; height: 100%;">
			<h3>当前我的图片</h3>
			<div style="width: 10vw;height: 10vw; "><img
			v-bind:src="this.$ip+'/api/public/showimg/'+this.$store.state.user.pic"	
			style="width: 100%;height:100%;"/></div>

		</div>
		<div style="width: 74%;height: 100%; ">
			<h3>上传新的图片</h3>
			<input type="file" ref = "img">
			<hr>
			<button @click="updatePic()">更新我的图片</button>
		</div>
	</div>
	
</template>
<script setup>
	import {ref,reactive,onMounted} from 'vue'
		import {$get,$postx,$postf} from "../../ajax/index.js"
		import myalert from "../../utils/myalert.js"
		const data = reactive({
			
		})
		const img=ref(null);
		/*  */
	function updatePic(){
		let fd = new FormData();
		let files = img.value.files[O];  //获取文件上传第一个文件内容
		fd.append("mypic",files);
		
		$postf("/api/user/updatePic",fd)
		 .then((resp)=>{
			 console.log(resp.data.data)
		 })
	}
	
	
</script>

<style>
</style>
